<template>
  <div v-if="!isLoading"
       style="align-self: center;justify-items: center">
    <h1>资源归还信息</h1>
    <el-form ref="form"
             :model="proInfo"
             label-position="left"
             label-width="80px"
             style="margin-left:10%;width: 80%;align-self: center">
      <el-form-item label="功能名称">
        <el-input disabled v-model="proInfo.pro_name"/>
      </el-form-item>

      <el-card class="display-card">
        <template #header>
          实验药品归还信息
        </template>
        <el-form-item
            v-for="(res) in proInfo.drug_info"
            :label="res.name"
            :key="res.key"
            style="flex: 1">
          <el-col :span="4">
            归还数量:&nbsp;&nbsp;&nbsp;{{ res.retn_num}}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group
                :fill="radio_color[res.ret_status]"
                v-model="res.ret_status"
                disabled text-color="black">
              <el-radio-button border label="0">确认归还</el-radio-button>
              <el-radio-button border label="1">尚未归还</el-radio-button>
              <el-radio-button border label="2">部分归还</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.ret_status==='2'">
          <el-col :span="2" :offset="1">
            归还数量:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-input-number v-model="res.lost_num" disabled/>
          </el-col>
        </span>

        </el-form-item>
      </el-card>


      <el-card class="display-card">
        <template #header>
          实验器材归还信息
        </template>
        <el-form-item
            v-for="(res) in proInfo.equ_info"
            :label="res.name"
            :key="res.key"
            style="flex: 1">
          <el-col :span="4">
            归还数量:&nbsp;&nbsp;&nbsp;{{ res.retn_num}}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group
                :fill="radio_color[res.ret_status]"
                v-model="res.ret_status"
                disabled text-color="black">
              <el-radio-button border label="0">确认归还</el-radio-button>
              <el-radio-button border label="1">尚未归还</el-radio-button>
              <el-radio-button border label="2">部分归还</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.ret_status==='2'">
          <el-col :span="2" :offset="1">
            遗失数量:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-input-number v-model="res.lost_num" disabled/>
          </el-col>
        </span>
        </el-form-item>
      </el-card>


      <el-card class="display-card">
        <template #header>
          实验动物归还信息
        </template>
        <el-form-item
            v-for="(res) in proInfo.animal_info"
            :label="res.name"
            :key="res.key"
            style="flex: 1">

          <el-col :span="4">
            归还数量:&nbsp;&nbsp;&nbsp;{{ res.retn_num}}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group
                :fill="radio_color[res.ret_status]"
                v-model="res.ret_status"
                disabled text-color="black">
              <el-radio-button border label="0">确认归还</el-radio-button>
              <el-radio-button border label="1">尚未归还</el-radio-button>
              <el-radio-button border label="2">部分归还</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.ret_status==='2'">
          <el-col :span="2" :offset="1">
            遗失数量:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-input-number v-model="res.lost_num" disabled/>
          </el-col>
        </span>
        </el-form-item>
      </el-card>

      <el-card class="display-card">
        <template #header>
          生物样本归还信息
        </template>
        <el-form-item
            v-for="(res) in proInfo.sample_info"
            :label="res.name"
            :key="res.key"
            style="flex: 1">

          <el-col :span="4">
            归还数量:&nbsp;&nbsp;&nbsp;{{ res.retn_num}}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group
                :fill="radio_color[res.ret_status]"
                v-model="res.ret_status"
                disabled text-color="black">
              <el-radio-button border label="0">确认归还</el-radio-button>
              <el-radio-button border label="1">尚未归还</el-radio-button>
              <el-radio-button border label="2">部分归还</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.ret_status==='2'">
          <el-col :span="2" :offset="1">
            遗失数量:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-input-number v-model="res.lost_num" disabled/>
          </el-col>
        </span>
        </el-form-item>
      </el-card>

      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="onSubmit">归还完成</el-button>
        <el-button type="warning" @click="onWait">暂时取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: "returnRes",
  data() {
    return {
      isLoading: true,
      flag: true,
      proInfo:null,
      radio_color: ['green', 'red', 'orange']
    }
  },
  created() {
    this.pro_id = this.$route.params.pro_id;
    if (this.pro_id===undefined){
      this.pro_id=sessionStorage.getItem("pro_id");
    }else {
      sessionStorage.setItem("pro_id",this.pro_id)
    }
    this.getData();
  },
  methods: {
    getData(){
      let that = this;
      get("/funcUnit/getInfo",{
        id: this.pro_id
      }).then(function (res) {
        if (res.code===1){
          res = res.data;
          that.proInfo = res;
          that.proInfo.equ_info = JSON.parse(res.equ_info);
          that.proInfo.drug_info = JSON.parse(res.drug_info);
          that.proInfo.animal_info = JSON.parse(res.animal_info);
          that.proInfo.sample_info = JSON.parse(res.sample_info);

          for (const res of that.proInfo.equ_info) {
            if (res.ret_status==='1'){
              that.flag=false;
              break;
            }
          }

          for (const res of that.proInfo.drug_info) {
            if (res.ret_status==='1'){
              that.flag=false;
              break;
            }
          }

          for (const res of that.proInfo.animal_info) {
            if (res.ret_status==='1'){
              that.flag=false;
              break;
            }
          }

          for (const res of that.proInfo.sample_info) {
            if (res.ret_status==='1'){
              that.flag=false;
              break;
            }
          }
          that.isLoading=false;
        }
      })
    },
    onSubmit() {
      if (this.flag===false){
        ElMessage.error({
          showClose: true,
          message: "当前存在尚未归还的资源，暂时无法归还完成",
          type: "error",
          center: true
        })
        return;
      }
      get("/funcUnit/updateState",{
        id: this.proInfo.pro_id,
        state: "归还完成"
      }).then(function (res) {
        if (res.code===1){
          ElMessage.success({
            showClose: true,
            message: "实验数据状态已更新",
            type: "success",
            center: true
          })
        }
      });
      history.back();
    },
    onWait(){
      history.back();
    }
  },
}
</script>

<style scoped>
.display-card{
  margin-top: 15px;
  margin-bottom: 5px;
}
</style>